
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/component/pear/css/pear.css" />
</head>
<body>
    <form class="layui-form">
        <div class="mainBox">
            <div class="main-container">
            
                <div class="layui-form-item">
                      <label class="layui-form-label">栏目名称</label>
                      <div class="layui-input-block">
                        <input type="text" name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" value="{$data['name']}">
                      </div>
                </div>
                
                <div class="layui-form-item">
                    <label class="layui-form-label">图标</label>
                    <div class="layui-input-block">
                          <div class="layui-input-inline" style="width: 500px;">
                            <input type="text"  name="icon1" id="icon1" lay-verify="required" placeholder="请选择图标" autocomplete="off" class="layui-input" value="{$data['icon1']}">
                          </div>
                          <div class="layui-input-inline">
                            <button style="float: left;" type="button" class="layui-btn" id="up_icon1">上传图标</button>
                          </div>
                    </div> 
                    <div class="layui-input-inline" style="margin-left: 0px;width: 500px;">
                          
                          <div class="layui-input-block">
                            <div style="text-align: center;width: 100px;margin-bottom: 5px;display: flex;" id="icon1box">
                            </div>
                            <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="jindu">
                                <div class="layui-progress-bar" lay-percent=""></div>
                            </div>
                          </div>
                    </div> 
                </div>
                <div class="layui-form-item">
                      <label class="layui-form-label">url</label>
                      <div class="layui-input-block">
                        <input type="text" name="url" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" value="{$data['url']}">
                      </div>
                </div>
                <div class="layui-form-item">
                      <label class="layui-form-label">排序</label>
                      <div class="layui-input-block">
                        <input type="text" name="sort" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" value="{$data['sort']}">
                      </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <input type="radio" name="status" value="1" title="启用" lay-filter="status" {$data['status']==1?'checked':''}>
                        <input type="radio" name="status" value="2" title="禁用" lay-filter="status" {$data['status']==2?'checked':''}>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="button-container">
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="save">
                    <i class="layui-icon layui-icon-ok"></i>
                    提交
                </button>
                <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
        </div>
    </form>

<script src="/static/js/jquery-1.8.3.min.js"></script>
<script src="/static/component/layui/layui.js"></script>
<script src="/static/component/pear/pear.js"></script>
<script>
     if($("#icon1").val()){
        var icon1=$("#icon1").val();
            s=`<div class="layui-input-inline">
                                    <img class="layui-upload-img" style="width: 100px;" src="${icon1}">
                                    <button style="margin-top: 5px;" type="button" class="layui-btn layui-btn-xs" onclick="del($(this),'${icon1}')">删除</button>
                                </div>`
        
        $('#icon1box').html(s); 
    }

    function del(obj,path){
        obj.parent().remove();
        $("#icon1").val('');
    }
    function del2(obj,path){
        obj.parent().remove();
        $("#icon2").val('');
    }
layui.use(['form','jquery','upload','element','laydate'],function(){
    let form = layui.form;
    let upload = layui.upload;
    let laydate = layui.laydate;
    let element = layui.element;
    let $ = layui.jquery;

    laydate.render({ 
      elem: '#time',
      type:'date'
    });

    

     var uploadInst = upload.render({
        elem: '#up_icon1'
        ,url: '/admin/col/upload'
        ,exts: 'jpg|png|gif|bmp|jpeg'
        ,field:'file'
        ,accept: 'images'   //指定允许上传时校验的文件类型
        ,before: function(obj){
          //预读本地文件示例，不支持ie8
          obj.preview(function(index, file, result){
            $('#icon1').attr('src', result); //图片链接（base64）
          });
          element.progress('jindu', '0%'); //进度条复位
          layer.msg('上传中', {icon: 16, time: 0});
        }
        ,done: function(res){
            console.log(res)
          //如果上传失败
          if(res.code > 0){
            return layer.msg('上传失败');
          }else{
            $("#icon1").val(res.data);
            str=`<div class="layui-input-inline">
                                    <img class="layui-upload-img" style="width: 100px;" src="${res.data}">
                                    <button style="margin-top: 5px;" type="button" class="layui-btn layui-btn-xs" onclick="del($(this),'${res.data}')">删除</button>
                                </div>`
          }
          $('#icon1box').html(str); 
          // $('#icon1Text').html(''); 
        }
        ,error: function(){
          var imgText = $('#imgText');
          imgText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs img-reload">重试</a>');
          imgText.find('.img-reload').on('click', function(){
            uploadInst.upload();
          });
        }
        //进度条
        ,progress: function(n, index, e){
          element.progress('jindu', n + '%'); 
          if(n == 100){
            layer.msg('上传成功',{icon:1})
          }else{
            layer.msg('上传失败', {icon: 2});
          }
        }
      });

     //自定义验证规则
    // form.verify({
    //   username:[/^[A-Za-z0-9_]{6,12}$/,'用户名必须是6到12位，由字母下划线数字组成'],
    //   pass: [/^[\S]{6,12}$/,'密码必须6到12位，且不能出现空格'],
    //   num:[/^\d+$/,'得是整数'],
    //   price:[/(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/,'注意价格格式'],
    //   head_portrait:function(value){
    //     if(!value){
    //       return '请上传头像';
    //     }
    //   }
    // });
    form.on('submit(save)', function(data){
        console.log(data.field)
        // return;
        $.ajax({
            data:JSON.stringify(data.field),
            dataType:'json',
            contentType:'application/json',
            type: 'post',
            success:function(res){
                if(res.code==1){
                    layer.msg(res.msg,{icon:1,time:1000},function(){
                        parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                        parent.layui.table.reload("dataTable");
                    });
                }else{
                    layer.msg(res.msg,{icon:2,time:1000});
                }
            }
        })
        return false;
    });
})
</script>
</body>
</html>